<template>
    <div class="play_music">
        <div class="play_top">
            <svg class="icon" aria-hidden="true" @click="close">
                <use xlink:href="#icon-zuojiantou-"></use>
            </svg>
            <span class="hint">{{this.$store.state.playList[this.$store.state.index].name}}</span>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang1"></use>
            </svg>
        </div>
        <div class="play_content">
            <img id="control" src="../assets/music3.png" alt="">
            <img id="panel" src="../assets/music2.png" alt="">
            <img id="music_img" :src='`${this.$store.state.playList[this.$store.state.index].al.picUrl}`' alt="">
        </div>
        <div class="play_lyric"></div>
        <div class="progress"></div>
        <div class="play_footer">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xunhuan"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shangyishoushangyige"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-if="!state">
                <use xlink:href="#icon-24gl-playCircle"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-else>
                <use xlink:href="#icon-24gl-pauseCircle"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiayigexiayishou"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-31liebiao"></use>
            </svg>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .play_music{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .play_top{
        padding: .4rem .2rem;
        display: flex;
        .icon{
            width: 1rem;
        }
        .hint{
            flex: 1;
        }
    }
    .play_content{
        margin-top: .4rem;
        position: relative;
        #control{
            position: absolute;
            width: 1.6rem;
            top: 0;
            left: 3.4rem;
            z-index: 99;
            transform-origin: top left;
            transition: all 0.6s;
            transform:rotate(-24deg);
        }
        #panel{
            width: 5rem;
            position: absolute;
            top: 1.6rem;
            left: 1.25rem;
            z-index: 9;
        }
        #music_img{
            border-radius: 50%;
            width: 3.2rem;
            position: absolute;
            top: 2.5rem;
            left: 2.15rem;
        }
    }
    .play_footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2rem;
        padding: 0 5%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .icon{
            font-size: .4rem;
            &:nth-child(3){
                font-size: .6rem;
            }
        }
    }
</style>

<script>
export default {
    props: ['state'],
    mounted(){
        console.log(this.$store.state.playList[this.$store.state.index].al.picUrl);
    },
    methods:{
        close(){
            this.$emit('closePlayMusic');
        }
    }
}
</script>